<template>
	<view>
		<view :style="{height:heightPx + 'px',top:top+'px'}" class="shop-con u-flex">
			<view class="search">
				<view class="search-r">
					<u-search height="70" @search="search" :show-action="!1" bg-color="#fff" placeholder="搜索你需要的" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="shop-content u-flex u-flex-1">
				<view class="nav-list">
					<scroll-view scroll-y="true" style="height: 100%;">
						<!-- <view @click="sindex = -1;getGoodsList()" :class="{active:sindex == -1}">全部</view> -->
						<view @click="sindex = index;getGoodsList(item.id)" v-for="(item,index) in goodsClassify" :key="item.id" :class="{active:index==sindex}">{{item.classifyName}}</view>
					</scroll-view>
				</view>
				<view class="goods-list u-flex-1">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view v-for="item in goodsList" :key="item.id">
							<view class="title">{{item.classifyName}}</view>
							<view class="list u-flex">
								<view class="item" v-for="item2 in item.goods" :key="item2.id" @click="jump(`/pages/college/goods?id=${item2.id}`)">
									<image :src="item2.cover"></image>
									<view class="tit u-line-1">{{item2.goodsName}}</view>
									<view class="price">{{item2.price || 0}}i币</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"college-shop",
		data() {
			return {
				goodsClassify:[],
				goodsList:[],
				sindex:0,
				keyword:''
			};
		},
		mounted() {
			this.$emit('mounted')
		},
		props:['top','bottom'],
		computed:{
			heightPx(){
				return uni.getSystemInfoSync().screenHeight - this.top - this.bottom
			}
		},
		methods:{
			getClassify(){
				this.$u.api.goodsClassify().then(res=>{
					this.goodsClassify = res
					// 默认获取第一个分类的商品
					res.length && this.getGoodsList(res[0].id)
				})
			},
			getGoodsList(){
				this.$u.api.goodsList({
					goods_classify_id:this.goodsClassify[this.sindex].id,
					keyword:this.keyword
			}).then(res=>{
					this.goodsList = res
				})
			},
			search(){
				this.getGoodsList()
			}
		},
		created() {
			this.getClassify()
		}
	}
</script>

<style lang="scss">
	// 商城区域
	.shop-con{
		position: fixed;left: 0;width: 750rpx;background-color: #fff;
		flex-direction: column;
		.search{
			background-color: #fff;padding: 20rpx 60rpx;width: 100%;flex-shrink: 0;
			.search-r{border-radius: 100rpx;box-shadow: 6rpx 6rpx 16rpx rgba($color: #000000, $alpha: .1);}
		}
		.shop-content{
			width: 100%;height: 1px;align-items: flex-start;
			.nav-list{width: 200rpx;height: 100%;background-color: #F9F9F9FF;flex-shrink: 0;
				view{text-align: center;padding: 20rpx 20rpx;word-break: break-all;
					&.active{font-weight: bold;font-size: 30rpx;background-color: #fff;}
				}
			}
			.goods-list{
				height: 100%;padding: 0 30rpx 30rpx;
				.title{font-weight: bold;word-break: break-all;padding-bottom: 20rpx;padding-left: 20rpx;}
				.list{
					justify-content: space-between;flex-wrap: wrap;align-items: flex-start;
					.item{
						width: 220rpx;text-align: center;
						image{width: 140rpx;height: 140rpx;border-radius: 10rpx;}
						view.tit{text-align: center;padding-top: 10rpx;}
						view.price{color: $tc;padding-bottom: 20rpx;}
					}
				}
			}
		}
	}
</style>
